<template>
	<view class="page1-box">
		<!-- <view class="background-box"> -->
			<!-- <image src="http://fcdn.qiushilaile.com/game/default-6531626338103875.png" class="back-img"></image> -->
		<!-- </view> -->
		<view class="content">
			<view class="title">MBTI 职业性格分析</view>
			<view class="small-title-box">
				<image src="../../static/img/title-1.png" class="small-title"></image>
			</view>
			<view class="btn-box">
				<view :class="btnIndex === 1 ?'btn btn-active':'btn'" @click="chouseBtn(1)">
					<view class="btn-title">基础版</view>
					<view class="btn-data">28题 <text class="btn-text">免费</text></view>
				</view>
				<view :class="btnIndex === 2 ?'btn btn-active':'btn'" @click="chouseBtn(2)">
					<view class="btn-title">专业版</view>
					<view class="btn-data">93题
						<text class="btn-text">免费</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="botton-title">想知道你的职业和性格匹配吗？</view>
			<!-- <details-btn-box class="details-box"></details-btn-box> -->
			<view class="botton-title" style="margin-top: 25rpx;font-size: 25rpx;">-本小程序仅供娱乐-</view>
		</view>

		<u-modal v-model="show" :content="content" :show-confirm-button="true" :show-cancel-button="true" @confirm="confirm"></u-modal>
		<tips-message-dialog :show.sync="tipsMessageDialogStatus"   :type="1" :btnIndex="btnIndex"  @startAnswer="startAnswer" @close="closeTipsMessage"></tips-message-dialog>
	</view>
</template>

<script>
	import TipsMessageDialog from '@/components/TipsMessageDialog'
	import DetailsBtnBox from '@/components/DetailsBtnBox'
	const util = require('../../util/util.js')

	export default {
		name: 'Home',
		components: {
			TipsMessageDialog,
			DetailsBtnBox
		},
		data() {
			return {
				tipsMessageDialogStatus: false,
				btnIndex: 0,
				systemObj: {},
				payStatus: false,
				show: false,
				content: '请前系统设置打开授权才可答题'
			}
		},
		async onLoad(option) {
			uni.removeStorageSync('qutui_info')
			uni.removeStorageSync('qrCodeInfo')

			if(JSON.stringify(option) != "{}") {
				if(("qutui_user_id" in option) && ("project_id" in option)) {
					uni.setStorageSync('qutui_info',{
						qutui_user_id: option.qutui_user_id,
						project_id: option.project_id
					})
				}
				else {
					uni.setStorageSync('qrCodeInfo',{
						promote_user_id: option.wechat_user_id,
						mini_app_code: option.mini_app_code,
						product_id: option.product_id
					})
				}
			}
		},
		onHide() {
			this.tipsMessageDialogStatus = false
			this.btnIndex = 0
		},
		async created () {
			// this.checkUpdate()
			this.systemObj = this.$store.state.systemObj
			// this.init()
		},
		methods: {
			
			confirm() {
				
			},
			async init() {
				try {
					try {
						uni.removeStorageSync('openid')
						let loginRes = await util.login()
						this.$store.commit('setUserInfo', loginRes.userInfo);
					}
					catch (e) {
						return
					}
				}
				catch (e) {
					console.log(e)
				}
			},
			onShareAppMessage() {
				let path = '/pages/index/index'
				return {
					path,
					templateId:'glo725gg2dj70ekjd0',
					success(res) {
						uni.hideShareMenu({
							success(res) {
								console.log(`showShareMenu 调用成功`);
							},
							fail(res) {
								console.log(`showShareMenu 调用失败`);
							},
						});
					},
					fail(err) {
						console.log(err);
					},
				};
			},
			async checkUpdate(){
				try{
					console.log('check update')
					const updateManager = uni.getUpdateManager();
					updateManager.onCheckForUpdate(function (res) {
						console.log("onCheckForUpdate", res.hasUpdate);
						// }
					});

					updateManager.onUpdateReady(() => {
						uni.showModal({
							title: "更新提示",
							content: "新版本已经准备好，是否立即使用？",
							success: function (res) {
								if (res.confirm) {
									// 调用 applyUpdate 应用新版本并重启
									updateManager.applyUpdate();
								} else {
									uni.showToast({
										icon: "none",
										title: "小程序下一次「冷启动」时会使用新版本",
									});
								}
							},
						});
					});

					updateManager.onUpdateFailed(() => {
						uni.showToast({
							title: "更新失败，下次启动继续...",
						});
					});
				}catch (e) {

				}
			},
			chouseBtn(index) {
				this.btnIndex = index
				this.tipsMessageDialogStatus = true
			},
			async startAnswer(index) {
				uni.navigateTo({
					url: '../answer/index?number=' + index
				})
			},
			closeTipsMessage() {
				this.btnIndex = 0
			},
			async getPay() {
				try {
					let payRes = await util.pay()
					if(payRes.code === 1) {
						this.$store.commit('setPayStatus', true);
						uni.navigateTo({
							url:"../answer/index?number=" + this.btnIndex
						})
					}
				}
				catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page1-box {
		 background-color: #0182E0;
		 height: 100vh; 
		.background-box {
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			right: 0rpx;
			bottom: 0rpx;

			.back-img {
				display: block;
				width: 100%;
				height: 100%;
				will-change: transform;
			}
		}

		.content {
			position: relative;
			padding: 20% 63rpx 0rpx 63rpx;

			.title {
				text-align: center;
				color:#fff;
				font-size: 54rpx;
			}

			.small-title-box {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;

				.small-title {
					display: block;
					width: 360rpx;
					height: 40rpx;
					will-change: transform;
				}
			}

			.btn-box {
				margin-top: 302rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.btn {
					width: 294rpx;
					height: 158rpx;
					background:linear-gradient(315deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.2) 100%);
					box-shadow:0rpx 15rpx 25rpx 0rpx rgba(1, 25, 39, 0.5);
					border-radius:10rpx;
					color:#fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.btn-title {
						margin-bottom: 10rpx;
						font-size: 36rpx;
						font-weight:500;
					}
					.btn-data {
						font-size: 26rpx;
						font-weight:400;

						.btn-text {
							padding-left: 5px;
							color:#FFD100;
						}
					}
				}

				.btn-active {
					background:linear-gradient(270deg,rgba(0,150,255,1) 0%,rgba(60,179,255,1) 100%);
				}
			}

			.check-btn {
				margin:0 auto;
				margin-top: 250rpx;
				width: 624rpx;
				height: 100rpx;
				background:rgba(255,255,255,1);
				border-radius: 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color:rgba(35,140,215,1);
				line-height: 100rpx;
				text-align: center;
			}
		}

		.bottom-box {
			position: absolute;
			left: 0rpx;
			right: 0rpx;
			bottom: 80rpx;
			padding: 0px 63rpx;


			.botton-title {
				font-size:26rpx;
				color:rgba(170,214,255,1);
				text-align: center;
			}

			.beian-title {
				margin-top: 15rpx;
				font-size: 25rpx;
				color:rgba(170,214,255,1);
				text-align: center;
			}

			 ::v-deep .details-btn-box {
				margin-top: 81rpx;
			}
		}
	}
</style>
